<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 204px;
				height: 201px;
				background-color: aquamarine;
				
			}
			.active{
				background-color: red;
				color: blue;
			}
			.choice{
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			133
		</div>
		<script>
			// 获取元素
			const box=document.querySelector('.box');
			// 采用classlist方式修改，不加点后面是字符串
			 box.classList.add('active');
			 // 删除
			 box.classList.remove('active');
			 // 删除box样式
			 box.classList.remove('box');
			 // className修改,不加点后面是字符串，缺点会被覆盖
			 box.className='active';
			 box.className='box';
			 // toggle有还是没有呀？有就删除，没有就加
			 box.classList.toggle('choice')
			 
		</script>
	</body>
</html>